<template>
    <view class="wrap">
        <SaleTip :tipsList="tipsList" v-if="vuex_toBePaidList.length > 0"><view class="delBtn" @click="deleteAll">全部删除</view></SaleTip>
        <!-- 图片列表 -->
        <ImageList :originList="vuex_toBePaidList" :packPrice="packPrice" @gotoPreView="gotoPreView" @getPhotosData="getPhotosData"></ImageList>
        <!-- 底部结算 -->
        <Settlement
            :billingInfo="billingInfo"
            :selectAllStatus="isSelectdAll"
            :couponList="couponList"
            @getSelectAllStatus="getSelectAllStatus"
            @viewCouponDetail="viewCouponDetail"
            @gotoPayPage="gotoPayPage"
            v-if="vuex_toBePaidList.length > 0"
        ></Settlement>
        <!-- 未找到照片 -->
        <NoData v-if="vuex_toBePaidList.length <= 0" :textTip="textTip"></NoData>
        <!-- 优惠券详情 -->
        <div class="coupon-detail-wrap" v-if="showCouponDetail">
            <CouponDetail :couponList="couponList" :packPrice="packPrice" :currentCoupon="selectedCoupon" @closeCoupon="closeCoupon" @selectCoupon="selectCoupon"></CouponDetail>
        </div>
    </view>
</template>

<script>
import ImageList from './components/ImageList.vue';
import SaleTip from '@/components/SaleTip/index.vue';
import Settlement from '@/components/Settlement/index.vue';
import CouponDetail from '@/components/CouponDetail/index.vue';
import NoData from '@/components/NoData/index.vue';
import { accAdd } from '@/common/utils.js';
import { commonMethods } from '@/mixins/commonMethods.js';
import { deletePhotoes } from '@/api/photos.js';

export default {
    data() {
        return {
            textTip: '暂无照片哦，快去筛选购买吧！',
            // 是否删除全部
            isDeletedAll: false,
            isSelectdAll: false
        };
    },
    mixins: [commonMethods],
    onLoad(option) {
        if (option && option.name) {
            uni.setNavigationBarTitle({
                title: option.name
            });
        }
        if (this.vuex_tobePaidUserId) {
            this.getSalesInfo(this.vuex_tobePaidUserId);
            this.getCouponList(this.vuex_tobePaidUserId);
        }
    },
    onShow() {
		console.log(this.vuex_toBePaidList)
        uni.$on('updateCouponList', () => {
            if (this.vuex_tobePaidUserId) {
                this.getCouponList(this.vuex_tobePaidUserId, 0);
            }
        });
        if (this.vuex_toBePaidList.length > 0) {
            this.isSelectdAll = this.vuex_toBePaidList.every(item => {
                return item.isSelected;
            });
        }
    },
    methods: {
        // 删除所有
        deleteAll() {
            if (this.isDeletedAll) {
                return;
            }
            uni.showModal({
                title: '删除',
                content: '确定是否全部删除？',
                success: res => {
                    if (res.confirm) {
                        this.sureDelete();
                    } else if (res.cancel) {
                        console.log('用户取消删除');
                    }
                }
            });
        },
        // 全部删除
        async sureDelete() {
            let idArr = this.getAllPhotosId();
            let res = await deletePhotoes({
                ids: JSON.stringify(idArr)
            });
            if (res.RequestStatus == 100) {
                this.deleteSuccess();
            } else {
                this.$showToast(res.Msg);
            }
        },
        // 删除成功
        deleteSuccess() {
            this.$u.vuex('vuex_toBePaidList', []);
        },
        // 获取要删除的图片id列表
        getAllPhotosId() {
            let ids = [];
            this.vuex_toBePaidList.forEach(item => {
                ids.push(item.photoid);
            });
            return ids;
        },

        // 选择使用优惠券
        selectCoupon(item) {
            this.selectedCoupon = item;
            let payParam = this.getPayParam(this.selectedPics, this.vuex_tobePaidUserId, this.selectedCoupon.coupon_number);
            this.computeAmount(payParam);
        },
        // 获取图片列表选中的数据
        getPhotosData(picdata) {
            this.isSelectdAll = picdata.isSelectdAll;
            this.selectedPics = picdata;
            // 如果有优惠券的话 就请求接口获取优惠价
            if (this.selectedCoupon && this.selectedCoupon.coupon_number && picdata.hadSelectPicCount > 0) {
                let payParam = this.getPayParam(picdata, this.vuex_tobePaidUserId, this.selectedCoupon.coupon_number);
                this.computeAmount(payParam);
            } else {
                this.billingInfo.payAmount = picdata.packagedPrice;
                this.billingInfo.saleAmount = picdata.saleAmount;
                this.billingInfo.discount = accAdd(picdata.saleAmount, -picdata.packagedPrice);
                this.billingInfo.hadSelectPicCount = picdata.hadSelectPicCount;
                this.billingInfo.ids = picdata.ids;
                this.billingInfo.type = picdata.type;
            }
        },
        // 到预览页面
        gotoPreView(data) {
            this.$u.vuex('vuex_toBePaidList', data.list);
            uni.navigateTo({
                url: `/pages/minePages/toBePaidPreView/toBePaidPreView?targetIndex=${data.index}`
            });
        },
        gotoPayPage(data) {
            uni.navigateTo({
                url: `/pages/minePages/pay/pay?payData=${JSON.stringify(data)}&couponData=${JSON.stringify(this.selectedCoupon)}&userid=${this.vuex_tobePaidUserId}`
            });
        }
    },
    components: {
        ImageList,
        SaleTip,
        Settlement,
        CouponDetail,
        NoData
    }
};
</script>

<style lang="scss" scoped="scoped">
.wrap {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #f7f8fc;
    .delBtn {
        position: absolute;
        right: 30rpx;
        top: 50%;
        transform: translate(0, -50%);
        width: 125rpx;
        height: 50rpx;
        text-align: center;
        line-height: 50rpx;
        font-size: 26rpx;
        color: #ffffff;
        background-color: #d18737;
        border-radius: 10rpx;
        border: 2rpx solid #d18737;
        z-index: 10;
    }
    .coupon-detail-wrap {
        position: fixed;
        z-index: 10;
        left: 0;
        bottom: 98rpx;
    }
}
</style>
